<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="library/datepicker/skin/WdatePicker.css"/>
		<style>
			html,body{height:100%;}
			#template{display: none;}
			#mask{
				position:fixed;
				background-color:rgba(0,0,0,.5);
				width: 100%;
				height:100%;
				top:0;
				left:0;
				display: none;
			}
			#popup p{
				line-height:42px;
			}
			#popup{
				width:550px;
				padding:30px;
				background-color:#fff;
				border-radius:20px;
				position:fixed;
				top:50%;
				z-index:1;
				left:50%;
				transform:translate(-50%,-50%);
				display: none;
			}
			#close{
				position:absolute;
				top:5px;
				right:15px;
				color:#999;
				font-size: 24px;
				cursor:pointer;
				transition:all .5s;
			}
			#close:hover{
				transform: rotate(90deg);
			}
			.nav li{
				float:left;
				list-style:none;
			}
		</style>
	</head>
	<body>
		
		<h3>用户：<span id="username"></span><a href="/login.html"  id="outlogin">[退出登录]</a></h3>
		<ul class="nav">

			<li><a href="/index.html">学生管理</a></li>
			<li><a href="/score.html">成绩管理</a></li>
		</ul>
		<div style="float:right;margin-right:15px;margin-top: 15px;">
			<button class="btn btn-primary" id="popupshow">+添加学生</button>
		</div>
		
		<table class="table">
			<thead>
				<tr>
					<th>ID</th>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
					<th>所在城市</th>
					<th>入学日期</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr id="template">
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td>
						<button class="btn btn-danger delete">删除学员</button>
						<button class="btn btn-primary edit">修改信息</button>
					</td>
				</tr>
			</tbody>
		</table>

		<div id="popup">
			<span id="close"> × </span>
			<div class="form-group">
				<label for="newName">姓名</label>
				<input type="text" class="form-control" id="newName" placeholder="请输入学生姓名">
			</div>
			<div class="form-group">
				<label for="newAge">年龄</label>
				<input type="number" class="form-control" id="newAge" placeholder="请输入学生年龄">
			</div>
			<div class="form-group">
				<label class="radio-inline">
				  <input type="radio" name="sex" id="boy" value="option1" checked> 男
				</label>
				<label class="radio-inline">
				  <input type="radio" name="sex" id="girl" value="option2"> 女
				</label>
			</div>
			<div class="form-group">
				<label for="newCity">所在城市</label>
				<select name="" id="province"></select>
				<select name="" id="city"></select>
				<select name="" id="area"></select>
			</div>
			<div class="form-group">
				<label>入学日期</label>
				<input type="text" class="form-control" id="joinDate" placeholder="" onclick="WdatePicker()">
			</div>
			<button class="btn btn-primary" id="send">确认</button>
			<button class="btn btn-default" id="cancel">取消</button>
			<p class="err" style="color: red;display: none;">请填写所有内容</p>
		</div>
		<div id="mask">
		</div>
		<script src="library/jquery.min.js"></script>
		<script src="library/citys.js"></script>
		<script src="library/datepicker/wdatepicker.js"></script>
		<script>
			let username = sessionStorage.getItem("username");
			if(!username){
				location.href = "http://10.35.170.110/login.html"
			}
			$("#username").html(username)

			$("#outlogin").click(function(){
				sessionStorage.clear();
			})
			$.ajax({
				url:"http://10.35.170.110/getData",
				success:function(data){
					console.log(data)
					for(let i = 0; i < data.length; i++){
						let clone = $("#template").clone(true);
						clone.attr("id","")
						clone.find("td").eq(0).html(data[i].id)
						clone.find("td").eq(1).html(data[i].name)
						clone.find("td").eq(2).html(data[i].sex)
						clone.find("td").eq(3).html(data[i].age)
						clone.find("td").eq(4).html(data[i].province +  data[i].city + data[i].area)
						clone.find("td").eq(5).html(data[i].joinDate)
						clone.appendTo($(".table tbody"))
					}
				}
			})
			$('.delete').click(function(){
				let _this = $(this)
				if(confirm("确定删除吗？")){
					$.ajax({
						url:"http://10.35.170.110/delete",
						data:{
							id:$(this).closest("tr").find("td").eq(0).html()
						},
						success:function(data){
							if(data === "success"){
								_this.closest("tr").remove()
							}
							else{
								alert("删除操作失败！")
							}
						}
					})
				}
			})
			$("#popupshow").click(function(){
				$("#newName").val("")
				$("#newAge").val("")
				$("#boy").attr("checked","checked")
				$("#joinDate").val("")
				
				$("#popup").fadeIn()
				$("#mask").fadeIn()
				$("#send").click(function(){
					if($("#newName").val() && $("#newAge").val()){
						$("#popup p.err").css({
							display:"none"
						})
						$.ajax({
							url:"http://10.35.170.110/add",
							data:{
								name:$("#newName").val(),
								age:$("#newAge").val(),
								sex:$("#boy")[0].checked ? "男" : "女",
								province:$("#province").val(),
								city:$("#city").val(),
								area:$("#area").val(),
								joinDate:$("#joinDate").val(),
							},
							success:function(data){
								if(data === "success"){
									history.go(0)
								}
								else{
									alert("插入操作失败！")
								}
							}
						})
						alert(1)
					}else{
						$("#popup p.err").css({
							display:"block"
						})
					}
				})
			})
			
			$("#cancel").click(function(){
				$("#popup").hide()
				$("#mask").hide()
				$("#popup p.err").css({
					display:"none"
				})
				$("#send").unbind("click");
			})
			$("#close").click(function(){
				$("#popup").hide()
				$("#mask").hide()
				$("#popup p.err").css({
					display:"none"
				})
				$("#send").unbind("click");
			})
			
			$(".edit").click(function(){
				$("#popup").fadeIn()
				$("#mask").fadeIn()
				$("#popup p.err").css({
					display:"none"
				})
				
				let getId = $(this).closest("tr").find("td").eq(0).html()
				
				$("#newName").val($(this).closest("tr").find("td").eq(1).html())//姓名
				$("#newAge").val($(this).closest("tr").find("td").eq(3).html())//年龄
				if($(this).closest("tr").find("td").eq(2).html() === "女"){
					$("#boy").eq(0).removeAttr("checked");
					$("#girl").eq(0).attr("checked","checked");
				}else{
					$("#girl").eq(0).removeAttr("checked");
					$("#boy").eq(0).attr("checked","checked");
				}
				$("#joinDate").val($(this).closest("tr").find("td").eq(5).html())
				$.ajax({
					url:"http://10.35.170.110/getcity",
					data:{
						id:$(this).closest("tr").find("td").eq(0).html()
					},
					success:function(data){
						$("#province").val(data.province)
						$("#province").change()
						$("#city").val(data.city)
						$("#city").change()
						$("#area").val(data.area)
						
						$("#send").click(function(){
							if($("#newName").val() && $("#newAge").val()){
								$.ajax({
									url:"http://10.35.170.110/modify",
									data:{
										id:getId,
										name:$("#newName").val(),
										age:$("#newAge").val(),
										sex:$("#boy")[0].checked ? "男" : "女",
										province:$("#province").val(),
										city:$("#city").val(),
										area:$("#area").val(),
										joinDate:$("#joinDate").val(),
									},
									success:function(data){
										if(data === "success"){
											history.go(0)
										}
										else{
											alert("修改操作失败！")
										}
									}
								})
								alert(1)
							}
							else{
								$("#popup p.err").css({
									display:"block"
								})
							}
						})
					}
				})
			})
			
		</script>
	</body>
</html>

